<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('签退')"/>
    </head>
    <body class="gray-bg">
        <div class="container-div">
            <div class="row">
                <div style="background-color:white;border-radius:10px;padding:20px;width: 400px;height: 400px;margin: 20px auto;">
                    <span id="initMsg" style="position: absolute;font-size: 16px;margin-left: 150px;line-height: 380px">Loding...</span>
                    <video id="video" width="450px" height="450px" autoplay="autoplay"></video>
                    <canvas id="canvas" width="450px" height="450px" style="display:none;"></canvas>
                </div>
                <button class="btn btn-primary center-block" type="button" onclick="takePhoto()" style="width:390px;height:80px;font-size: 20px;">签退</button>
            </div>
        </div>
        <th:block th:include="include :: footer"/>
        <script th:inline="javascript">
            var prefix = ctx + "oa/attendance";

            let video = document.getElementById("video");

            function getUserMediaToPhoto(constraints, success, error) {
                if (navigator.mediaDevices.getUserMedia) {
                    //最新标准API
                    navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
                } else if (navigator.webkitGetUserMedia) {
                    //webkit核心浏览器
                    navigator.webkitGetUserMedia(constraints, success, error);
                } else if (navigator.mozGetUserMedia) {
                    //firefox浏览器
                    navigator.mozGetUserMedia(constraints, success, error);
                } else if (navigator.getUserMedia) {
                    //旧版API
                    navigator.getUserMedia(constraints, success, error);
                }
            }

            //成功回调函数
            function success(stream) {
                //兼容webkit核心浏览器
                var CompatibleURL = window.URL || window.webkitURL;
                //将视频流转化为video的源
                // video.src = CompatibleURL.createObjectURL(stream);
                video.srcObject = stream;
                video.play();//播放视频
                $("#initMsg").hide();
            }

            function error(error) {
                $("#initMsg").text("访问用户媒体失败,请联系管理员!");
            }

            if (navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia) {
                getUserMediaToPhoto({video: {width: 450, height: 450}, facingMode: "user"}, success, error);
            } else {
                $("#initMsg").text("你的浏览器不支持访问用户媒体设备");
            }


            //拍照
            function takePhoto() {
                $.modal.layerLoading("正在验证，请稍后...");
                //获得Canvas对象
                let canvas = document.getElementById("canvas");
                let ctx = canvas.getContext('2d');
                ctx.drawImage(video, 0, 0, 450, 450);
                var base64File = canvas.toDataURL();
                var formData = new FormData();
                formData.append("file", base64File);
                $.ajax({
                    type: "post",
                    url: prefix + "/signOutAdd",
                    data: formData,
                    contentType: false,
                    processData: false,
                    async: false,
                    success: function (result) {
                        if (result.code == 0) {
                            $.operate.ajaxSuccess(result);
                        } else if (result.code == 404) {
                            $.modal.confirm(result.msg, function (callBack) {
                                if (callBack) {
                                    $.modal.openOptions({
                                        url: prefix + "/faceRegister",
                                        title: "员工考勤人脸注册"
                                    })
                                }
                            })
                        }else{
                            $.operate.ajaxSuccess(result);
                        }
                        $.modal.layerCloseLoading();
                    },
                    error: function (error) {
                        console.log('error')
                    }
                });

            }
        </script>
    </body>
</html>